<template>
	<view class="container">
		<view class="header">
			<view class="menu">
				<view class="menu_i" :class="{ menu_c: menu == 1 }" @click="menu = 1">Entrar</view>
				<view class="menu_i" :class="{ menu_c: menu == 2 }" @click="menu = 2">Registre-se</view>
			</view>
			<view class="back" @click="clickBack">
				<up-icon name="close" color="#fff" size="14"></up-icon>
			</view>
		</view>

		<register v-if="menu == 2"></register>
		<enter v-if="menu == 1"></enter>
		<register-none v-if="menu == 3"></register-none>
		
		<view class="footer1" v-if="menu == 3">
			<view class="f_text"> Sim quero cancelar </view>
		</view>
		<view class="footer" v-else>
			<view class="f_text">Ja tem uma conta？</view>
			<view class="f_text">Faca login aqui</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch,provide} from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

import enter from './components/enter.vue';
import register from './components/register.vue';
import registerNone from './components/registerNone.vue';

const menu = ref(1);
const value1 = ref(1);
const checked = ref(false);
const loding = ref(false);
let options = [
	{
		label: '+30',
		value: '+30'
	},
	{
		label: '+86',
		value: '+86'
	}
];

const user = reactive({
	name: '',
	email: '',
	phone: '',
	code: '+30',
	password: ''
});

const btnStyle = {
	height: '98rpx',
	borderRadius: '12rpx',
	fontSize: '32rpx',
	color: '#fff',
	fontWeight: 700,
	border: '2rpx solid #454757'
};
const inputStyle = {
	height: '98rpx',
	borderRadius: '12rpx',
	background: '#19191F',
	border: '2rpx solid #454757',
	padding: '0 20rpx'
};

const placeholderStyle = "{color:'rgba(126, 132, 160, 0.5)'}";

const setMenu=(num)=>{
	menu.value=num
}

provide('setMenu',setMenu)

onMounted(() => {});

const clickBack = () => {
	if (menu.value == 3) {
		uni.navigateBack();
	} else {
		menu.value = 3;
	}
};

const registerBtn = () => {
	console.log('注册');
};

const loginBtn = () => {
	loding.value = true;
	setTimeout(() => {
		loding.value = false;
	}, 2000);
};

const changedro = (e) => {
	user.code = e;
};
</script>

<style lang="scss" scoped>
:deep(.u-dropdown__content__mask[data-v-d45d1d94]) {
	width: 0;
}
:deep(.u-cell-group__wrapper[data-v-30c8e4c7]) {
	background-color: #454757;
}
.container {
	background-color: #19191f;
	width: 100vw;
	padding: 0 32rpx;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 32rpx;
	line-height: 64rpx;
	.header {
		height: 156rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-bottom: 1rpx solid rgba(216, 216, 216, 0.05);
		.menu {
			display: flex;
			align-items: center;
			.menu_i {
				margin-right: 40rpx;
				transition: all 0.3s;
				font-weight: 700;
				&:last-child {
					margin-right: 0;
				}
			}
			.menu_c {
				color: #38aa6f;
			}
		}
		.back {
			position: absolute;
			right: 26rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 56rpx;
			height: 56rpx;
			border-radius: 12rpx;
			background-color: #020203;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.footer {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 44rpx;
		.f_text {
			font-size: 24rpx;
			color: #7e84a0;
			font-weight: 900;
		}
	}
	.footer1 {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 44rpx;
		.f_text {
			font-size: 24rpx;
			color: #7e84a0;
			font-weight: 900;
		}
	}
}
</style>
